<!--
 * @Descripttion: 增加功能清单
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-11 11:15:55
 -->
<template>
  <div class="menu-add">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
    >
      <template v-slot:content>
        <el-card shadow="never">
          <el-form
            :model="formItem"
            :rules="rules"
            label-width="120px"
            ref="menuFrom"
          >
            <el-row :gutter="12">
              <el-col :span="12">
                <el-form-item label="排序标识" prop="funListOrder">
                  <el-tooltip placement="top">
                    <div slot="content"><strong>格式:</strong> [0001-9999]</div>
                    <el-input v-model="formItem.funListOrder"></el-input>
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="功能清单图标" prop="funListIcon">
                  <el-input v-model="formItem.funListIcon">
                    <i
                      slot="prepend"
                      :class="formItem.funListIcon"
                      class="la-el-size"
                    ></i>
                    <el-button
                      @click="selectIcon"
                      icon="el-icon-search"
                      slot="append"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="功能清单名称" prop="funListName">
                  <el-input v-model="formItem.funListName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="功能清单类别" prop="funListType">
                  <el-select clearable v-model="formItem.funListType" disabled>
                    <el-option
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in funListTypeOptions"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              :loading="saveLoading"
              @click="submitForm"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
    <tf-icon ref="tfIconRef" @iconSelectOk="iconSelectOk"></tf-icon>
  </div>
</template>
<script>
export default {
  props: {
    funListTypeOptions: {
      type: Array,
      required: true
    }
  },
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default,
    'tf-icon': require('@/components/common/icon/TfIcon').default
  },
  data() {
    //验证需要不能是0000
    let orderFormat = (rule, value, callback) => {
      if (value == '0000') {
        return callback(new Error('排序标识格式不正确，格式为:[0001-9999]!'))
      } else {
        return callback()
      }
    }
    return {
      tfVisible: false,
      // 窗体信息
      windowInfo: {
        titleIcon: 'el-icon-circle-plus-outline',
        title: '增加平台节点'
      },
      saveLoading: false,
      rules: {
        funListOrder: [
          { required: true, message: '排序标识不能为空!', trigger: 'blur' },
          {
            pattern: /^\d{4}$/,
            message: '排序标识格式不正确，格式为:[0001-9999]!',
            trigger: 'blur'
          },
          { validator: orderFormat, trigger: 'blur' }
        ],
        funListIcon: [
          {
            max: 50,
            message: '功能清单图标不得超过【50】个字符',
            trigger: 'blur'
          }
        ],
        funListName: [
          { required: true, message: '功能清单名称不能为空!', trigger: 'blur' },
          {
            max: 10,
            message: '功能清单名称不得超过【10】个字符',
            trigger: 'blur'
          }
        ]
      },
      formItem: {
        parentLevelCode: '',
        funListOrder: '',
        funListIcon: '',
        funListName: '',
        funListType: 'group',
        funListUrl: ''
      }
    }
  },
  methods: {
    // 显示新增窗口
    show() {
      if (this.$refs.menuFrom) {
        this.$refs.menuFrom.resetFields()
      }
      this.tfVisible = true
    },
    // 确认选择图标
    iconSelectOk(icon) {
      this.formItem.funListIcon = icon
    },
    // 查询图标
    selectIcon() {
      let icon = this.formItem.funListIcon
      this.$refs.tfIconRef.selectIconWin(icon)
    },
    // 提交表单保存功能清单信息
    submitForm() {
      this.$refs.menuFrom.validate(valid => {
        if (valid) {
          this.saveLoading = true
          const saveFormItem = this.$html.post('menu/saveMenu', this.formItem)
          saveFormItem
            .then(data => {
              if (data.returnType == 'success') {
                this.$emit('menuTreeData')
                this.saveLoading = false
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success'
                })
                this.tfVisible = false
              }
            })
            .catch(() => {
              this.saveLoading = false
              console.log('error:platformMenuAdd/submitForm')
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
